<template>
    <el-dialog v-model="dialogVisible" title="在线浏览" width="80%" align-center>
        <div style="width: 100%; height: 750px;">
            <vue-office-docx style="height: 100%" :src="fileUrl"/>
        </div>
        <template #footer>
            <div>
                <el-button type="primary" @click="closeDialog">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref } from "vue"
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

//是否弹窗
const dialogVisible = ref(false)
//文档url
const fileUrl = ref("")

//显示弹窗
const showDocVisible = (url) => {
    dialogVisible.value = true
    fileUrl.value = url
    //console.log("url=============>"+url)
}

//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false
    fileUrl.value = ""
}

//向父组件暴露方法
defineExpose({
    showDocVisible
})
</script>

<style scoped>
/* 添加一些简单的样式 */
.sync-dialog__div {
    height: 300px;
    overflow: auto;
}
</style>
  